<template>
    <div>
        <div class="px-4 my-4">
            <el-page-header :icon="ArrowLeft" @back="router.back()">
            </el-page-header>
        </div>
        <div class="w-[1400px] mx-auto mt-8">
            <div>
                <avue-form
                    ref="formRef"
                    :option="{ labelWidth: 120, column: articleColumn }"
                    v-model="editingArticle"
                    @submit="save"
                >
                    <template #content>
                        <RichText v-model="editingArticle.content" />
                    </template>
                </avue-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="ArticleEdit">
import { add, getList, update } from '@/apis/commonCrud'
import { useUserStore } from '@/stores/user'
import { ArrowLeft } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import 'vditor/dist/index.css'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleColumn } from './column'
import RichText from '@/components/RichText.vue'

const editingArticle = ref<any>({
    title: '',
    content: '',
    poster: '',
    publishTime: '2025-02-06 13:48:00',
    comment: 0,
})

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

articleColumn.find((item) => {
    if (item.prop === 'userId') {
        item.value = userStore.userInfo.id
        if (!route.path.startsWith('/admin')) {
            item.display = false
        } else {
            item.display = true
        }
        return true
    }
})
const getData = async () => {
    const articleId = route.params.id
    if (!articleId || articleId === 'add') return

    const res = await getList('articles', {
        id: articleId,
    })

    if (!res.success) {
        return
    }
    if (res.data.rows.length > 0) {
        const article = res.data.rows[0]
        article.publishTime = article.publishTime
            ? dayjs(article.publishTime).format('YYYY-MM-DD HH:mm:ss')
            : article.publishTime
        editingArticle.value = article
    }
}

getData()

const save = async (row, done) => {
    const articleId = route.params.id

    const newData = {
        ...row,
        publishTime: row.publishTime
            ? dayjs(row.publishTime).format('YYYY-MM-DD HH:mm:ss')
            : '',
    }

    if (articleId === 'add') {
        const res = await add('articles', {
            ...newData,
            userId: userStore.userInfo.id,
            publishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        })
        if (!res.success) {
            ElMessage.error('添加失败')
            done()
            return
        }
        ElMessage.success('添加成功')
        done()
        router.back()
        return
    }

    const res = await update('articles', +articleId, newData)
    if (!res.success) {
        ElMessage.error('保存失败')
        done()
        return
    }
    ElMessage.success('保存成功')
    done()
}
</script>

<style scoped></style>
